<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>加载ArcGIS Server发布的WMTS服务数据</title>
    <!--<script src="https://cdn.jsdelivr.net/npm/ol@v10.3.1/dist/ol.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@v10.3.1/ol.css">-->
    <script src='../lib/ol6.4.3/ol.js'></script>
    <script src="../lib/proj4/proj4.js"></script>
    <link rel="stylesheet" href="../css/ol4/ol.css">
    <link rel="stylesheet" href="../css/main.css">
    <style>
        #map{
            width: 100%;
            height: 100vh;
        }
    </style>
    </style>
</head>
<body>
    <div id="map"></div>
 
    <script>
        // 首先设置好WMTS瓦片地图的瓦片坐标系
        let projection = ol.proj.get('EPSG:3857');          // 获取web墨卡托投影坐标系
        let projectionExtent = projection.getExtent();      // web墨卡托投影坐标系的四至
        let width = ol.extent.getWidth(projectionExtent);   // web墨卡托投影坐标系的水平宽度，单位米
        let resolutions = [];                               // 瓦片分辨率
        let matrixIds = [];
        for(let z = 0; z < 19; z++){
            resolutions[z] = width / (256 * Math.pow(2, z)); 
            matrixIds[z] = z;
        }
        let wmtsTileGrid = new ol.tilegrid.WMTS({
            origin: ol.extent.getTopLeft(projectionExtent), // 原点（左上角）
            resolutions: resolutions,                       // 分辨率数组
            matrixIds: matrixIds                            // 矩阵ID，就是瓦片坐标系z维度各个层级的标识
        }); 
        
        // WMTS数据源与地图
        let wmtsSource = new ol.source.WMTS({
            url: "http://92.164.149.33:8086/tianjing-server/mapdata-api/services/hancheng_wmts_bz/MapServer/WMTS?key=9060402c91e749f083abd7eef878b268",	
            layer: 'hancheng_wmts_bz',                  // 图层名
            version: '1.0.0',                   // WMTS版本
            // 投影坐标系矩阵集，一定要和WMTS capabilities文档中一致，否则会加载失败
            matrixSet: 'default028mm',          
            format: 'image/png',                // 图片格式
            projection: projection,             // 投影坐标系
            requestEncoding: 'KVP',             // 请求的编码方式，默认就是'KVP'   
            // 在WMTS capabilities文档中对应的样式名，一定要写，否则会加载失败  
            style: 'default',                   
            tileGrid: wmtsTileGrid              // 投影坐标系
        });
        let wmtsLayer = new ol.layer.Tile({
            source: wmtsSource
        });

        let xyzSource = new ol.source.XYZ({
            url: 'http://92.164.149.33:8086/tianjing-server/mapdata-api/services/hancheng_wmts/MapServer/tile/{z}/{y}/{x}?key=9060402c91e749f083abd7eef878b268'
        });

        let xyzLayer = new ol.layer.Tile({
            source: xyzSource
        });
 
        let map = new ol.Map({
            target: 'map',
            layers: [
                // new ol.layer.Tile({
                //     source: new ol.source.OSM(),
                // }),
                // new ol.layer.Tile({
                //     title: '影像图',
                //     source:  new ol.source.XYZ({
                //         url: "http://123.14.199.58:8086/tianjing-server/mapdata-api/services/hancheng_imagery/MapServer/WMTS?key=552280e3-8cbd-49a1-9d2a-9010045bc492&layer=hancheng_imagery&style=default&tilematrixset=default028mm&Service=WMTS&Request=GetTile&Version=1.0.0&Format=image%2Fpng&TileMatrix={z}&TileCol={x}&TileRow={y}"
                //     })
                // }),
                wmtsLayer,
                xyzLayer
            ],
            view: new ol.View({
                center: [12295323.0,4227777.9],
                zoom: 16
            })
        });
    </script>
</body>
</html>